<template>
  <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
    <!-- List title bar -->
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
      <h2 class="text-lg font-semibold text-gray-800">Added Courses</h2>
      <span class="text-sm text-gray-500">A total of {{ courses.length }} courses</span>
    </div>

    <!-- Empty status prompt -->
    <div v-if="courses.length === 0" class="px-6 py-12 text-center text-gray-500">
      <p>There is currently no course data available. Please click the 'Add Course' button to create one</p>
    </div>


    <table v-else class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course Name</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teacher</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Week</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
          <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        
        <tr v-for="(course, index) in courses" :key="course.id || index" class="hover:bg-gray-50 transition-colors">
          <!-- Course Name -->
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm font-medium text-gray-900">{{ course.name || 'Unnamed' }}</div>
          </td>
          <!-- Teacher -->
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-500">{{ course.teacher || 'Unknown' }}</div>
          </td>
          
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-500">{{ course.startDate || 'Not set' }}</div>
          </td>
          
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-500">{{ course.endDate || 'Not set' }}</div>
          </td>
          
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-500">{{ getWeekDay(course.day || course.weekday) }}</div>
          </td>
          <!-- Time -->
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-500">{{ (course.startTime || '00:00') }} - {{ (course.endTime || '00:00') }}</div>
          </td>
          <!-- Operation Buttons -->
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button 
              @click="handleEdit(course, index)"
              class="text-blue-600 hover:text-blue-900 mr-4 transition-colors"
            >
              Edit
            </button>
            <button 
              @click="handleDelete(course)"
              class="text-red-600 hover:text-red-900 transition-colors"
            >
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';


const props = defineProps({
  courses: {
    type: Array,
    required: true,
    
    validator: (value) => {
      return value.every(course => 
        course.name && 
        course.teacher && 
        (course.day !== undefined || course.weekday !== undefined) && 
        course.startTime && 
        course.endTime 
      );
    }
  }
});


const emit = defineEmits(['edit-course', 'delete-course']);


const handleEdit = (course, index) => {
  emit('edit-course', { ...course }, index);
};


const handleDelete = (course) => {
  if (confirm('Are you sure you want to delete this course?')) {
    emit('delete-course', course.id || course.index);
  }
};
 
const getWeekDay = (day) => {
  if (!day) return 'Unknown';
  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']; 
  return days[Number(day) - 1] || 'Unknown';
};
</script>

<style scoped>
/* Responsive lateral scrolling */
@media (max-width: 640px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}
</style>